<!-- 刘洪材 -->
<!-- 2023年11月1日 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>解析天气信息</title>
  <style>
    h1{
      color: rgb(248, 206, 17);
      text-align: center;
    }

    #weather-info {
      font-size: 16px;
      color: blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>刘洪材的天气看板</h1>
  <div id="weather-info"></div>

  <script>
    //注意这个源仅供学习使用，不能做商业用途//注意这个源仅供学习使用，不能做商业用途//注意这个源仅供学习使用，不能做商业用途//注意这个源仅供学习使用，不能做商业用途
    // 使用 Fetch API 获取数据
    fetch('http://weather.123.duba.net/static/weather_info/101040500.html')
      .then(response => response.text())
      .then(data => {
        // 提取 JSON 数据
        const startIndex = data.indexOf('{');
        const endIndex = data.lastIndexOf('}') + 1;
        const jsonStr = data.substring(startIndex, endIndex);
        const jsonData = JSON.parse(jsonStr);

        // 提取天气信息
        const weatherInfo = jsonData.weatherinfo;   //城市
        const city = weatherInfo.city;
        const week = weatherInfo.week;    //获取星期几
        const temperature = weatherInfo.temp;   //当前
        const weather = weatherInfo.weather1;   //今天天气
        const Temperature0 = weatherInfo.temp1;    //今天温度
        const Temperature1 = weatherInfo.temp2;   //明天温度
        const Temperature2 = weatherInfo.temp3;   //后天温度
        const Temperature3 = weatherInfo.temp4;  
        const Temperature4 = weatherInfo.temp5;   
        const Temperature5 = weatherInfo.temp6;   //当前星期+5天温度
        // 计算第三天、第四天、第五天是星期几
        const weekdays = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
        const currentWeekdayIndex = weekdays.indexOf(week);
        const twoDay = weekdays[(currentWeekdayIndex + 2) % 7];
        const thirdDay = weekdays[(currentWeekdayIndex + 3) % 7];
        const fourthDay = weekdays[(currentWeekdayIndex + 4) % 7];
        const fifthDay = weekdays[(currentWeekdayIndex + 5) % 7];

        // 显示天气信息
        const weatherDiv = document.getElementById('weather-info');
        weatherDiv.innerHTML = `
          <p style="font-size: 20px; color: red;">城市/地区：${city}</p>
          <p style="font-size: 18px; color: green;">当前温度：${temperature}℃</p>
          <p style="font-size: 16px; color: blue;">今日天气：${weather}</p>
          <p style="font-size: 14px;">今天温度：${Temperature0}</p>
          <p style="font-size: 14px;">明天温度：${Temperature1}</p>
          <p style="font-size: 14px;">${twoDay}的温度：${Temperature2}</p>
          <p style="font-size: 14px;">${thirdDay}的温度：${Temperature3}</p>
          <p style="font-size: 14px;">${fourthDay}的温度：${Temperature4}</p>
          <p style="font-size: 14px;">${fifthDay}的温度：${Temperature5}</p>
        `;
      })
      .catch(error => {
        console.error('获取天气信息失败:', error);
      });
  </script>
</body>
</html>